<template>
    <transition 
        enter-active-class="animate__animated  animate__tada"
        leave-active-class="animate__animated animate__backOutDown"
    >
        <div v-show="visible" class="modal">
            <transition 
                enter-active-class="animate__animated  animate__backInDown"
                leave-active-class="animate__animated animate__backOutUp"
            >
                <div v-show="visible">内容</div>
            </transition>
            <slot></slot>
        </div>
    </transition >
</template>

<script>
export default {
    props:{
        visible:{
            type:Boolean,
            default:false
        }
    }
}
</script>

<style lang="scss">

    .modal{
        width:100%;
        background:lightblue;
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity 10s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>